<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<#include "./head.html">
		<script type="text/javascript">
        $(function(){
            setCenter();
            window.onresize = function (){
                setTimeout(function () { setCenter(); }, 100);
            }
            reRefreshImage();
            //
            $("body").keypress(function(e){
               if(e.charCode == 13){
            	   login();
               }
             });
        });
 
        function setCenter(){
            var top = ($(window).height() - $('#container').height() - 2) / 2;
            var left = ($(window).width() - $('#container').width() - 2) / 2;
 
            if (top < 0) top = 0;
            if (left < 0) left = 0;
            $('#container').offset({ left: left, top: top });
            
        }
    	function reRefreshImage(){
             var xhr = new XMLHttpRequest();
    		 xhr.open("GET",'/sso/CaptchaService/getCaptchaImage',true)
    		 xhr.responseType = 'blob'
    		 xhr.onreadystatechange = function() {
    			if (xhr.readyState === 4 && xhr.status == 200){
    				$("#sessionId").val(xhr.getResponseHeader("sessionId"));
    				$("#captcha_img").attr("src",window.URL.createObjectURL(this.response));
    			}
    		}
    		 xhr.send()
       		
       	}
    	function login(){
    		var isValid = $("#login").form('validate');
    		if(isValid){
    			var name = $("#name").textbox('getValue');
    			var password = $("#password").passwordbox('getValue');
    			var sessionId = $("#sessionId").val();
    			var captcha = $("#captcha").textbox('getValue');
    			var param = {
    					name:name
    					,password:password
    					,sessionId:sessionId
    					,captcha:captcha
    			}
    			ServiceUnit.execute("sso/SSOService","login",[param],function(reslut){
    				var token = reslut.data;
    				sessionStorage.setItem("token", token);
    				location.href = "./index";
    			});
    			reRefreshImage();
    		}
    		
    	}
    	function clearForm(){
    		$('#login').form('clear');
    	}
    </script>
	</head>
	
	<body>
		<div id="container" style="position: absolute;">
			<div align="center">
	        	<img src="../static/img/logo.jpg" style="margin-bottom: 5px;height: 100px;width: 100">
	    	</div>
			<div id="login" class="easyui-panel" title="登录" >
		        <table cellpadding="5">
		            <tr>
		                <td><input id="name" class="easyui-textbox" data-options="prompt:'账号',iconCls:'icon-man',width:220,required:true"/></td>
		            </tr>
		            <tr>
		                <td><input id="password" class="easyui-passwordbox" data-options="prompt:'密码',iconCls:'icon-lock',width:220,required:true"/></td>
		            </tr>
		            <tr>
		            	<td>
		            		<img id="captcha_img" style="height: 40px;width: 120px; float: left;" onclick="reRefreshImage()">
		            		<input id="captcha" class="easyui-textbox" data-options="prompt:'验证码',width:100,required:true"/>
		            		<input id="sessionId" type="hidden"/>
		            	</td>
		            </tr>
		            <tr>
		                <td align="center">
		                	<a href="javascript:void(0)" class="easyui-linkbutton" style="width:80px" onclick="login()">登录</a>
	            			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">清空</a>
		                </td>
		            </tr>
		        </table>
	    	</div>
		</div>
		
	</body>
</html>